<template>

  <div class="bottomNav">
    <div class="bottomMenu">
      <div class="btmMenu" @click="goUrl('personCar', 'personHome')">
        <div class="micon micon1" :class="cur==1?'micon1_1':''"></div>
        <p :class="cur==1?'curColor':''">有车要租</p></div>
      <div class="btmMenu" @click="goUrl('company', 'companyHome')">
        <div class="micon micon2" :class="cur==2?'micon2_1':''"></div>
        <p :class="cur==2?'curColor':''">企业用车</p></div>
      <div class="btmMenu" @click="goUrl('center', 'centerHome')">
        <div class="micon micon3" :class="cur==3?'micon3_1':''"></div>
        <p :class="cur==3?'curColor':''">我的</p></div>


    </div>
  </div>
</template>

<script>
  export default {
    props: ['cur'],
    name: 'mnav',
    methods: {
      goUrl (url, funCode) {
        this.$router.push({
          path: '/'+url,
          query: {
            funCode: funCode
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>

  .bottomNav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    /*background: rgba(248, 248, 248, 1);*/
    background-color: #fff;
    box-shadow: -5px 0px 8px 4px rgba(242, 242, 242, 0.5);
    height: 40px;
    padding-top: 10px;
    border-radius: 20px 20px 0px 0px;

  .bottomMenu {
    display: flex;

  .btmMenu {
    width: 33.3333%;
    text-align: center;

  p {
    margin: 0;
    padding: 0;
    font-size: 14px;
  }

  .curColor {
    color: rgba(28, 103, 255, 1);
  }

  .micon {
    margin: 0 auto;
    width: 20px;
    height: 20px;
    background-size: 90%;
    background-position: center;
    background-repeat: no-repeat;
  }

  .micon1 {
    background-image: url("../../assets/img/bicon1.png");
    background-size: 100%;
  }

  .micon1_1 {
    background-image: url("../../assets/img/bicon1_1.png");
    background-size: 100%;
  }

  .micon2 {
    background-image: url("../../assets/img/bicon2.png");
  }

  .micon2_1 {
    background-image: url("../../assets/img/bicon2_1.png");
  }

  .micon3 {
    background-image: url("../../assets/img/bicon3.png");
  }

  .micon3_1 {
    background-image: url("../../assets/img/bicon3_1.png");
  }

  }
  }
  }
</style>
